<template>
      <div class="thumb-example">
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide  v-for="(item,index) in imgArr" :key="index" :style="item.img" style="height:500px;width:100%"></swiper-slide>
       <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <div class="detail">
        <div class="item">场地面积
          <span>0m²</span>
        </div>
        <div class="item">
          场地层高
          <span>0m</span>
        </div>
        <div class="item">
          立柱数
          <span>2</span>
        </div>
        <div class="item">
          场地形状
          <span>不规则图形</span>
        </div>
        <div class="item">
          最大桌数
          <span>0桌</span>
        </div>
        <div class="item">
          最佳桌数
          <span>0桌</span>
        </div>
    </div>
  </div>
</template>
<script>
export default {
    data(){
        return{
                   swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          type: "fraction"
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      imgArr: [
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/1.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/2.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/3.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/4.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/5.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/6.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/7.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        }
      ]
        }
    }
}
</script>
<style scoped>
@import url("../../assets/font/iconfont.css");
@import url("../../assets/css/base.css");
.thumb-example {
  width: 100%;
  height: 100%;
  margin-top: 25px;
  margin-bottom: 20px;
  position: relative;
}
/deep/.swiper-pagination {
  color: greenyellow;
    display: flex;
    justify-content: flex-end;
   padding-right: 20px;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.swiper-slide .slide-1 {
  background-image: url("../../assets/images/example/1.jpg");
}
.swiper-slide .slide-2 {
  background-image: url("../../assets/images/example/2.jpg");
}
.swiper-slide .slide-3 {
  background-image: url("../../assets/images/example/4.jpg");
}
.swiper-slide .slide-4 {
  background-image: url("../../assets/images/example/5.jpg");
}
.swiper-slide .slide-5 {
  background-image: url("../../assets/images/example/6.jpg");
}

.swiper .gallery-top {
  height: 80%;
  width: 100%;
}
.swiper .gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.swiper .gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.swiper .gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
.detail{
  z-index: 10;
  width: 60%;
  height: 60px;

  position: absolute;
  bottom: 30px;
  left: 15%;
  display: flex;
  flex-wrap: wrap;
}
.detail .item{
  width: 33.333%;
  display: flex;
  justify-content: flex-start;
  color: #fff;
  opacity: .7;
}
.detail .item span{
  display: inline-block;
  margin-left: 15px;
   color: #fff;
   opacity: 1;
}
.detail .item:first-child::before{
  content:"\e601";
  font-family: "iconfont";
  margin-right: 5px;
}
.detail .item:nth-child(2)::before{
  content:"\e640";
  font-family: "iconfont";
  margin-right: 5px;
}
.detail .item:nth-child(3)::before{
  content:"\e660";
  font-family: "iconfont";
  margin-right: 5px;
}
.detail .item:nth-child(4)::before{
  content:"\e82b";
  font-family: "iconfont";
  margin-right: 5px;
}
.detail .item:nth-child(5)::before{
  content:"\e621";
  font-family: "iconfont";
  margin-right: 5px;
}
.detail .item:nth-child(6)::before{
  content:"\e621";
  font-family: "iconfont";
  margin-right: 5px;
}
</style>

